<template>
    <div class='weekend'>
        <div class="title">周末去哪儿</div>
        <div v-for="item in weekend" :key="item.id" class="item border-bottom">
            <img :src='item.imgUrl'>
            <div class="area">
            <p class='areatitle'>{{ item.title}}</p>
            <p class='info'>{{ item.desc}}</p>
            </div>        
        </div>
    </div>
          
</template>



<script>
    export default{
        props: ['weekend']
    }
</script>

<style lang="scss" scoped>
@import'../../css/sass/common.scss';
.weekend{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .title{
        width: 100%;
        padding-left: 0.2rem;
        line-height: pt(30);
        background-color: #eee;
    }
    .item{
         width: 100%; 
         img{
            height:pt(114) ;
            width: 100%;
         }
         .area{
             height: pt(65);
             display: flex;
             align-items: center;
             flex-wrap: wrap;
         
         p{
                padding-left: 0.2rem;
                width: 100%;
         }
         .info{
             margin-top: -0.4rem;
             font-size: pt(12);
         }
         }

    }
}
</style>

